<template>
  <div class="app-container">
    <div class="flex cursor">
      <div class="custom-title margin-right-lg " :class="tag==1?'active':''" @click="bindChangeTag(1)">数据汇总</div>
      <div class="custom-title" :class="tag==2?'active':''" @click="bindChangeTag(2)">卡券使用情况</div>
    </div>
    <div v-if="tag==1">
      <!--  数据汇总-->
      <div class="flex">
        <div class="label">周期：</div>
        <div class="padding">
          <el-radio-group v-model="cycleRadio" size="large" @change="bindchangeDate">
            <el-radio-button label="day">日</el-radio-button>
            <el-radio-button label="month">月</el-radio-button>
            <el-radio-button label="season">季</el-radio-button>
            <el-radio-button label="year">年</el-radio-button>
          </el-radio-group>
        </div>

      </div>
      <div class="flex">
        <div class="label">内容：</div>
        <div class="custom-tag">
          <el-radio-group v-model="radioCon" size="large">
            <el-radio-button :label="item.label" :value="item.label" v-for="(item,index) in typeList" :key="index" @click="bindRadio(item.label,item.value)" />
          </el-radio-group>
        </div>
      </div>
      <div class="flex input-height">
        <div class="label">位置：</div>
        <div class="align-center">
          <el-tree-select v-model="queryParams.loadId" :data="deptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id"
            class="margin-right" placeholder="请选择路段" check-strictly clearable @change="bindChangeTree($event,'loadId')" />
          <el-tree-select v-model="queryParams.deptId" :data="deptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id"
            class="margin-right" placeholder="请选择收费站" check-strictly clearable @change="bindChangeTree($event,'deptId')" />
        </div>
        <div class="label">时间：</div>
        <div class="align-center">
          <el-date-picker v-model="year" type="year" placeholder="请选择年份" style="margin-right:8px" @change="bindChangeAllDate($event,'year')" />
          <el-date-picker v-model="month" type="month" placeholder="请选择月份" style="margin-right:8px" @change="bindChangeAllDate($event,'month')" />
          <el-date-picker v-model="day" type="date" placeholder="请选择日" @change="bindChangeAllDate($event,'date')" />
        </div>
      </div>

      <el-table :data="tableData" style="width: 100%" :header-cell-style="{background:'#E0EAFB!important'}" :row-class-name="tableRowClassName" border>
        <!-- <el-table-column prop="date" label="路段" width="180" /> -->
        <el-table-column prop="deptName" label="收费站" width="180" />
        <el-table-column prop="address" label="时间" />
        <el-table-column prop="a" label="A" width="180" />
        <el-table-column prop="b" label="B" width="180" />
        <el-table-column prop="c" label="C" />
        <el-table-column prop="d" label="D" />
        <el-table-column prop="e" label="E" v-if="radioCon.includes('货')||radioCon.includes('ETC货')||radioCon.includes('非')||radioCon.includes('鲜活')" />
        <el-table-column prop="f" label="F" v-if="radioCon.includes('货')||radioCon.includes('ETC货')||radioCon.includes('非')||radioCon.includes('鲜活')" />
        <el-table-column prop="h" label="H" v-if="!radioCon.includes('非')&&!radioCon.includes('鲜活')" />
        <el-table-column prop="total" label="合计" />
      </el-table>

    </div>

    <div v-if="tag==2">

    </div>

  </div>
</template>

<script setup name="summary">
import moment from 'moment'
import { enTrafficList, exTrafficList, feeList } from "@/api/charge/ticket";
import { deptTreeSelect } from "@/api/system/user";

const tableData = ref()
const radioCon = ref('现客入')
const typeList = ref([{ label: '现客入', value: "收费站现金客车日报表" },
{ label: '现客出', value: "收费站现金客车日报表" },
{ label: '现客费', value: "收费站现金客车日报表" },
{ label: '现货入', value: "收费站现金货车日报表" },
{ label: '现货出', value: "收费站现金货车日报表" },
{ label: '现货费', value: "收费站现金货车日报表" },
{ label: 'ETC客入', value: "收费站ETC客车日报表" },
{ label: 'ETC客出', value: "收费站ETC客车日报表" },
{ label: 'ETC客费', value: "收费站ETC客车日报表" },
{ label: 'ETC货入', value: "收费站ETC货车日报表" },
{ label: 'ETC货出', value: "收费站ETC货车日报表" },
{ label: 'ETC货费', value: "收费站ETC货车日报表" },
{ label: '非客量', value: "收费站非现金客车日报表" },
{ label: '非客费', value: "收费站非现金客车日报表" },
{ label: '非货量', value: "收费站非现金货车日报表" },
{ label: '非货费', value: "收费站非现金货车日报表" },
{ label: '鲜活', value: "运输鲜活农产品车辆日报表" }])
const queryParams = ref({ "ticketName": "收费站现金客车日报表", "startDate": "2024-08-27", "endDate": "2024-08-28" }) //loadId 路段  ,"deptId":部门
const deptOptions = ref([])
const cycleRadio = ref('day')
const year = ref()
const month = ref()
const day = ref()
const selectName = ref('现客入')
const tag = ref(1)


const tableRowClassName = ({
  row,
  rowIndex,
}) => {
  if (rowIndex === 0) {
    return 'info-row'
  } else if (tableData.value[rowIndex].deptName.includes('小计')) {
    return 'success-row'
  }
  return ''
}
/** 查询部门下拉树结构 */
function getDeptTree() {
  deptTreeSelect().then(response => {
    deptOptions.value = response.data;
  });
};
const getEnterList = () => {
  enTrafficList(queryParams.value).then(res => {
    if (res.code == 200 && res.data && res.data.length) {
      tableData.value = res.data
    } else {
      tableData.value = []
    }
  });
}

const getGoList = () => {
  exTrafficList(queryParams.value).then(res => {
    if (res.code == 200 && res.data && res.data.length) {
      tableData.value = res.data
    } else {
      tableData.value = []
    }
  });
}

const getCostList = () => {
  feeList(queryParams.value).then(res => {
    if (res.code == 200 && res.data && res.data.length) {
      tableData.value = res.data
    } else {
      tableData.value = []
    }

  });
}
const bindChangeTree = (val, name) => {
  queryParams.value[name] = val;
  if (selectName.value.includes("入")) {
    getEnterList()
  } else if (selectName.value.includes("出")) {
    getGoList()
  } else {
    getCostList()
  }
}
const bindRadio = (name, val) => {
  queryParams.value.ticketName = val;
  selectName.value = name;
  if (name.includes("入")) {
    getEnterList()
  } else if (name.includes("出")) {
    getGoList()
  } else {
    getCostList()
  }
}

const bindchangeDate = (val) => {
  var date = new Date();
  var year = date.getFullYear();
  if (val == 'day') {
    queryParams.value.startDate = currentTime()
    queryParams.value.endDate = currentTime();
  } else if (val == 'month') {
    queryParams.value.startDate = moment().startOf('month').format('YYYY-MM-DD');
    queryParams.value.endDate = moment().endOf('month').format('YYYY-MM-DD')
  } else if (val == 'season') {
    let startQuarter = moment(`${year}-${3 * (index - 1) + 1}-01`).format('YYYY-MM-DD');
    let endQuarter = moment(`${year}-${3 * index}-${new Date('2024', 3 * index, 0).getDate()}`).format('YYYY-MM-DD');
    queryParams.value.startDate = startQuarter
    queryParams.value.endDate = endQuarter
  } else {
    queryParams.value.startDate = year + '-01-01'
    queryParams.value.endDate = year + '-12-31'
  }


  if (selectName.value.includes("入")) {
    getEnterList()
  } else if (selectName.value.includes("出")) {
    getGoList()
  } else {
    getCostList()
  }
}

const bindChangeAllDate = (val, name) => {
  if (name == 'year') {
    year.value = val;
    queryParams.value.startDate = val + '-01-01'
    queryParams.value.endDate = val + '-12-31'
  } else if (name == 'month') {
    month.value = val;
    if (year.value) {
      queryParams.value.startDate = year.value + val + '-01'
      queryParams.value.endDate = year.value + val + '-31'
    } else {
      queryParams.value.startDate = moment().startOf('month').format('YYYY-MM-DD');
      queryParams.value.endDate = moment().endOf('month').format('YYYY-MM-DD')
    }

  } else {
    var date = new Date();
    if (year.value && !month.value) {
      queryParams.value.startDate = year.value + '-' + date.getMonth() + 1 + '-' + val
      queryParams.value.endDate = year.value + '-' + date.getMonth() + 1 + '-' + val
    } else if (year.value && month.value) {
      queryParams.value.startDate = year.value + '-' + month.value + '-' + val
      queryParams.value.endDate = year.value + '-' + month.value + '-' + val
    } else if (!year.value && month.value) {
      queryParams.value.startDate = date.getFullYear() + '-' + month.value + '-' + val
      queryParams.value.endDate = date.getFullYear() + '-' + month.value + '-' + val
    } else {
      queryParams.value.startDate = date.getFullYear() + '-' + date.getMonth() + 1 + '-' + val
      queryParams.value.endDate = date.getFullYear() + '-' + date.getMonth() + 1 + '-' + val
    }
  }
}

const bindChangeTag = (val) => {
  tag.value = val;
}



// 获取时间
const currentTime = () => {
  var date = new Date();
  var year = date.getFullYear();
  var dateArr = [
    date.getMonth() + 1,
    date.getDate(),
  ];
  for (var i = 0; i < dateArr.length; i++) {
    if (dateArr[i] >= 1 && dateArr[i] <= 9) {
      dateArr[i] = "0" + dateArr[i];
    }
  }
  var strDate = year + '-' + dateArr[0] + '-' + dateArr[1]
  queryParams.value.startDate = strDate;
  queryParams.value.endDate = strDate;
  return strDate;
}

getDeptTree()
currentTime()
getEnterList()
</script>

<style scoped>
.flex {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.flex .label {
  color: #333;
  font-size: 14px;
}
/deep/.padding .el-radio-button--large .el-radio-button__inner {
  padding: 8px 19px;
}
/deep/ .custom-tag .el-radio-button--large .el-radio-button__inner {
  width: 80px;
  height: 30px;
  line-height: 30px;
  margin: 0 4px 0;
  padding: 0;
  border: 1px solid #e4e4e4;
  font-size: 14px;
}
/deep/ .custom-tag .el-radio-button--large.is-active .el-radio-button__inner {
  background: #fff;
  border: 1px solid #246BCC;
  color: #246BCC;
  position: relative;
}

/deep/
  .custom-tag
  .el-radio-button--large.is-active
  .el-radio-button__inner:after {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  border-top: 20px solid #246BCC;
  border-left: 20px solid transparent;
}
/deep/
  .custom-tag
  .el-radio-button--large.is-active
  .el-radio-button__inner:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 6px;
  background: transparent;
  top: 2px;
  right: 4px;
  border: 1px solid white;
  border-top: none;
  border-right: none;
  transform: rotate(-55deg);
  z-index: 9;
}

.margin-right {
  margin-right: 8px;
}

/deep/ .input-height .el-input__wrapper {
  height: 30px;
}
/deep/ .input-height .el-date-editor.el-input {
  height: 30px;
}
.margin-right-lg {
  margin-right: 30px;
}
.cursor {
  cursor: pointer;
}
.flex-end {
  margin-left: auto;
}
.active {
  position: relative;
}
.active::before {
  content: "";
  display: block;
  width: 50px;
  height: 2px;
  border-radius: 2px;
  background: var(--el-color-primary);
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
}

/deep/ .el-table .warning-row {
  background: #e0eafb !important;
  text-align: center;
}
/deep/ .el-table .success-row {
  background: #ffeed9 !important;
  text-align: center;
}
/deep/ .el-table .info-row {
  background: #eaeaea !important;
  text-align: center;
}
</style>